import Vue from 'vue'
import Vuex from 'vuex'

// 使用插件
Vue.use(Vuex)

// 1.0 状态存储
const state = {
  // 总和
  sum: 0,
  // 要累加的值
  num: 0
}

// 2.0 actions - 写业务的
const actions = {
  // 声明的是函数，处理一些业务, 这里的函数通过 $store.dispath()
  // 参数1是一个对象，参数2及后面的数据都是触发事件传入的数据
  // addSum(a, b) {
  //   // 通过 commit 提醒 mutations 该干活儿了
  //   a.commit('ADD_SUM')
  // }
  // 2.1 数值加加
  addSum({ commit }, b) {
    // 通过 commit 提醒 mutations 该干活儿了
    commit('ADD_SUM', b)
  },
  // 2.2 数值减减
  subSum({ commit }) {
    commit('SUB_SUM')
  },
  // 2.3 获取下拉框的值
  getNum({ commit }, val) {
    commit('GET_NUM', val)
  },
  // 2.4 如果是奇数则直接累加
  oddAdd({ commit }, val) {
    // 业务处理
    if (val % 2 === 1) commit('ODD_ADD')
    // 这里的this指向store实例，通用的
    console.log(this)
  },
  // 2.5 如果是奇数则直接累加
  timeoutAdd({ commit }) {
    // 是一个异步的方式添加
    setTimeout(() => {
      commit('TIMEOUT_ADD')
    }, 2000)
  }
}

// 3.0 mutations - 只有它有条件和能力对state进行操作
const mutations = {
  // 在mutations中定义的函数，不一定要大写，但是以后开发中，大家都大写了，所以是规范
  // 参数1是state对象，参数2及后面的数据都是触发事件传入的数据
  ADD_SUM(state, b) {
    state.sum += b
  },
  SUB_SUM(state) {
    state.sum--
  },
  GET_NUM(state, n) {
    state.num = n - 0
  },
  ODD_ADD(state, n) {
    state.sum += state.num
  },
  TIMEOUT_ADD(state, n) {
    state.sum += state.num
  }
}

// 导出实例
export default new Vuex.Store({
  // 存储所有需要共享的数据
  state,
  actions,
  mutations
})
